<!--
 * @Project_description: 测试页面
-->
<template>
  <d2-container class='page'>
    <!-- 顶部内容 -->
    <template slot='header'>
      <div class='base-header'>
        <!-- 左边 -->
        <div class='base-header-l'>
          <el-form
            ref='request'
            :disabled='loading'
            :inline='true'
            :model='request'
            class='header-form-inline'
            label-position='right'
            label-width='100px'
          >
            <!-- 文本 -->
            <el-form-item label='菜单名称' prop='link'>
              <el-input v-model='search' clearable placeholder='请输入菜单名称'></el-input>
            </el-form-item>
          </el-form>
          <!-- 下方按钮组-->
          <div class='base-header-b' style='margin-left: 95px'>
            <!--            <div class='base-header-btn'>-->
            <!--              <el-button type='primary' @click='select' :disabled='loading'>搜索</el-button>-->
            <!--            </div>-->
            <!--            <div class='base-header-btn'>-->
            <!--              <el-button plain @click='reset' :disabled='loading'> 重置</el-button>-->
            <!--            </div>-->
          </div>
        </div>
        <!-- 右边按钮组 -->
        <div class='base-header-r'>
          <div class='base-header-btn'>
            <el-button v-if='_auth("add")' type='primary' @click='$refs.add.init()'>添加</el-button>
          </div>
        </div>
      </div>
    </template>
    <!-- 内容 -->
    <el-table ref='list' v-loading='loading'
              :data='list.filter(data => !search || data.permissionName.toLowerCase().includes(search.toLowerCase()))'
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key='permissionId'
              style='width: 100%'>
      <el-table-column label='菜单名称' prop='permissionName'></el-table-column>
      <el-table-column label='菜单图标' prop='avatarImg'>
        <template slot-scope='{row}'>
          <d2-icon v-if='row.avatarImg' :name='row.avatarImg' />
          <span v-else>/</span>
        </template>
      </el-table-column>
      <el-table-column label='排序' prop='sortKey'></el-table-column>
      <el-table-column label='组件路径' prop='path'>
        <template slot-scope='{row}'>
          <span v-if='row.path'>{{ row.path }}</span>
          <span v-else>/</span>
        </template>
      </el-table-column>
      <el-table-column label='权限字符' prop='query'>
        <template slot-scope='{row}'>
          <span v-if='row.query'>{{ row.query }}</span>
          <span v-else>/</span>
        </template>
      </el-table-column>
      <el-table-column label='备注' prop='备注'>
        <template slot-scope='{row}'>
          <y-remark v-model='row.intro' />
        </template>
      </el-table-column>
      <el-table-column label='操作'>
        <template slot-scope='{ row }'>
          <span v-if='_auth("add")' class='base-row-btn' @click='$refs.add.init(null,row.permissionId)'>新增</span>
          <span v-if='_auth("edit")' class='base-row-btn' @click='update(row)'>修改</span>
          <el-popconfirm v-if='_auth("del")' title='确定从列表中移除吗？' @confirm='deleteBy(row)'>
            <span slot='reference' class='base-row-btn'>删除</span>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加 -->
    <addVue ref='add' :menuList='list' @load='getList' />
  </d2-container>
</template>

<script>
import addVue from './components/add.vue'

export default {
  name: 'sysMenu',
  // import引入的组件需要注入到对象中才能使用
  components: {
    addVue,
  },
  data() {
    // 这里存放数据
    return {
      // 加载状态
      loading: false,
      //数据
      list: [],
      request: {},
      //过滤节点名称
      search: '',
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getList()
  },
  // 方法集合
  methods: {
    // list
    async getList() {
      this.loading = true
      try {
        let res = await this.$api.menu.tree()
        this.list = res.data
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    // put
    update(row) {
      //重新copy一份对象，不要在原本上修改
      let rows = this.deepClone(row)
      this.$refs.add.init(rows)
    },
    //delete
    async deleteBy(row) {
      // 删除
      await this.$api.menu.del({ permissionId: row.permissionId })
      this.$message.success('删除成功')
      this.getList()
    },
    //翻页
    handleCurrentChange(val) {
      this.request.page = val
      this.getList()
    },
    // 换页码
    handleSizeChange(e) {
      this.request.size = e
      this.getList()
    },
    // 搜索
    select() {
      this.request.page = 1
      this.getList()
    },
    // 重置
    reset() {
      this.request.page = 1
      this.$refs.request.resetFields()
      this.getList()
    },
  },
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
